﻿<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>css3鼠标hover效果</title>
		<link rel="stylesheet" type="text/css" href="static/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="static/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="static/css/component.css" />
		<!--[if IE]>
  		<script src="static/js/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<header class="codrops-header">
				<h1>css3鼠标hover效果 <span>各种显示图片标题的效果</span></h1>	
			</header>
			<div class="grid">
				<figure class="effect-lily">
					<img src="static/picture/1.jpg" alt="img01"/>
					<figcaption>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-sadie">
					<img src="static/picture/2.jpg" alt="img02"/>
					<figcaption>
						<h2>Holy <span>Sadie</span></h2>
						<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-honey">
					<img src="static/picture/7.jpg" alt="img07"/>
					<figcaption>
						<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-layla">
					<img src="static/picture/4.jpg" alt="img04"/>
					<figcaption>
						<h2>Crazy <span>Layla</span></h2>
						<p>When Layla appears, she brings an eternal summer along.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-zoe">
					<img src="static/picture/14.jpg" alt="img14"/>
					<figcaption>
						<h2>Creative <span>Zoe</span></h2>
						<span class="icon-heart"></span>
						<span class="icon-eye"></span>
						<span class="icon-paper-clip"></span>
						<p>Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-oscar">
					<img src="static/picture/8.jpg" alt="img08"/>
					<figcaption>
						<h2>Warm <span>Oscar</span></h2>
						<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-marley">
					<img src="static/picture/9.jpg" alt="img09"/>
					<figcaption>
						<h2>Sweet <span>Marley</span></h2>
						<p>Marley tried to convince her but she was not interested.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-ruby">
					<img src="static/picture/10.jpg" alt="img10"/>
					<figcaption>
						<h2>Glowing <span>Ruby</span></h2>
						<p>Ruby did not need any help. Everybody knew that.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-roxy">
					<img src="static/picture/3.jpg" alt="img03"/>
					<figcaption>
						<h2>Charming <span>Roxy</span></h2>
						<p>Roxy was my best friend. She'd cross any border for me.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-bubba">
					<img src="static/picture/6.jpg" alt="img06"/>
					<figcaption>
						<h2>Fresh <span>Bubba</span></h2>
						<p>Bubba likes to appear out of thin air.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-romeo">
					<img src="static/picture/5.jpg" alt="img05"/>
					<figcaption>
						<h2>Wild <span>Romeo</span></h2>
						<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-dexter">
					<img src="static/picture/12.jpg" alt="img12"/>
					<figcaption>
						<h2>Strange <span>Dexter</span></h2>
						<p>Dexter had his own strange way. You could watch him training ants.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-sarah">
					<img src="static/picture/13.jpg" alt="img13"/>
					<figcaption>
						<h2>Free <span>Sarah</span></h2>
						<p>Sarah likes to watch clouds. She's quite depressed.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-chico">
					<img src="static/picture/15.jpg" alt="img15"/>
					<figcaption>
						<h2>Silly <span>Chico</span></h2>
						<p>Chico's main fear was missing the morning bus.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-milo">
					<img src="static/picture/11.jpg" alt="img11"/>
					<figcaption>
						<h2>Faithful <span>Milo</span></h2>
						<p>Milo went to the woods. He took a fun ride and never came back.</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
			</div>
		</div><!-- /container -->
		<script>
			// For Demo purposes only
			[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
				el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
			} );
		</script>
	</body>
</html>